<template>
    <div class="news-content">
        <div class="news-header">
            <div class="w1200">
                <div class="news-title">新闻中心</div>
                <div>了解绿通云最新资讯</div>
            </div>
        </div>
        <div class="w1200">
            <div class="news-consult">
                <div class="left">
                    <div class="consult-item" v-for="(item, index) in consultList" :key="index"
                        @click="toInfo(item.id)">
                        <div class="consult-img">
                            <img :src="item.coverUrl" alt="">
                        </div>
                        <div class="consult-card">
                            <div class="consult-title">{{ item.title }}</div>
                            <div class="consult-des">{{ item.subtitle }}</div>
                            <div class="consult-content">
                                <img src="https://image.lutongjiakao.com/system/b35c7c10be674c52ac8e5517083adfb7.png"
                                    alt="" class="icon-img">
                                <div class="consult-time">{{ item.publishTime }}</div>
                                <div class="flex" v-if="item.label">
                                    <div v-for="(ele, i) in item.label.split(',')" :key="i" class="consult-tags">
                                        {{ ele }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pagination" v-if="consultList.length">
                        <el-pagination background layout="prev, pager, next" :total="pageTotal" size="large"
                            @current-change="currentchange" @size-change="sizechange" />
                    </div>
                </div>
                <div class="right">
                    <div class="search-box">
                        <el-input v-model="searchForm.title" placeholder="请输入文章关键词" class="search-input" clearable
                            @keyup.enter.native="onSearch" />
                        <div class="search-btn" @click="onSearch">搜索</div>
                    </div>
                    <div class="right-section">
                        <div class="section-title">资讯分类</div>
                        <div class="category-tabs">
                            <div v-for="(cat, idx) in categories" :key="cat.value" class="category-btn"
                                @click="onCategoryChange(cat.name)">
                                {{ cat.name }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import router from '@/router'
import { ref, onMounted, reactive } from 'vue'
import { getArticleList, ArticleGroup } from '@/api/index'

const consultList = ref<any>([])

const categories = ref<any>([])

const searchForm = reactive({
    pageNum: 1,
    pageSize: 10,
    title: '',
    type: ''
})
const pageTotal = ref(0)

const toInfo = (id: any) => {
    router.push({
        name: 'newsInfo',
        query: { id }
    })
}

const filterEmptyValues = (obj: any) => {
    const result: any = {}
    for (const key in obj) {
        if (obj[key] !== '' && obj[key] !== null && obj[key] !== undefined) {
            result[key] = obj[key]
        }
    }
    return result
}

const getData = async () => {
    const res = await getArticleList(filterEmptyValues(searchForm))
    if (res.code === '0') {
        consultList.value = res.data.list
        pageTotal.value = res.data.total
    }
}
const currentchange = (val: number) => {
    searchForm.pageNum = val
    getData()
}
const sizechange = (val: number) => {
    searchForm.pageSize = val
    searchForm.pageNum = 1
    getData()
}
const onSearch = () => {
    searchForm.pageNum = 1
    getData()
}
const onCategoryChange = (cat: string) => {
    searchForm.type = cat
    searchForm.pageNum = 1
    getData()
}

const getArticleGroupList = async () => {
    const res = await ArticleGroup({
        pageNum: 1,
        pageSize: 10
    })
    if (res.code === '0') {
        categories.value = res.data
    }
}
onMounted(() => {
    getData();
    getArticleGroupList();
})
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.news-header {
    height: rem(360);
    padding-top: rem(50);
    background: url('https://image.lutongjiakao.com/system/fef61bd2f7114d0f88a80fb20fb789a4.png') no-repeat 50% / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-title {
    font-size: rem(36);
    color: #000;
    font-weight: bold;
    margin-bottom: rem(10);
}

.news-consult {
    padding-top: rem(37.5);
    padding-bottom: rem(40);
    display: flex;
    gap: rem(40);
}

.left {
    flex: 1 1 0%;
    min-width: 0;
}

.right {
    width: rem(320);
    min-width: rem(320);
    margin-left: auto;
}

.consult-item {
    display: flex;
    gap: rem(20);
    padding: rem(20) rem(10) rem(20) 0;
    margin-bottom: rem(20);
    cursor: pointer;

    &:hover {
        box-shadow: 0 8px 32px 0 rgb(0 0 0 / 5%);
        border-radius: rem(4);

        .consult-title {
            color: #0abc54;
        }
    }
}

.consult-img {
    width: rem(180);
    height: rem(105);
    cursor: pointer;
    flex-shrink: 0;

    img {
        width: 100%;
        height: 100%;
    }
}

.consult-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.consult-title {
    font-size: rem(14);
    color: #333;
    cursor: pointer;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
}

.consult-des {
    color: #999;
    font-size: rem(10);
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-break: break-all;
}

.consult-content {
    display: flex;
    align-items: center;
    overflow: hidden;
    -webkit-box-orient: vertical;
    word-break: break-all;
    line-height: 1;
}

.icon-img {
    width: rem(9);
    height: rem(9);
    margin-right: rem(5);
}

.consult-time {
    color: #999;
    font-size: rem(10);
    margin-right: rem(5);
}

.consult-tags {
    color: #0abc54;
    font-size: rem(10);
    margin-right: rem(5);
}

.pagination {
    display: flex;
    justify-content: center;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #0abc54 !important;
    color: #fff !important;
    border-color: #0abc54 !important;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-active):hover) {
    background-color: #e6f9ef !important;
    color: #0abc54 !important;
    border-color: #0abc54 !important;
}

:deep(.el-pagination.is-background .btn-prev:hover),
:deep(.el-pagination.is-background .btn-next:hover) {
    color: #0abc54 !important;
    background-color: #e6f9ef !important;
    border-color: #0abc54 !important;
}

/* 右侧搜索和分类 */
.search-box {
    display: flex;
    align-items: center;
    margin-bottom: rem(18);
}

.search-input {
    flex: 1;
    height: rem(31.5);
}

.search-btn {
    font-size: rem(14);
    padding: 0 rem(12);
    width: rem(75);
    height: rem(31.5);
    background: #0abc54;
    color: #fff;
    border-radius: 0 4px 4px 0;
    text-align: center;
    line-height: rem(31.5);
}

.right-section {
    background: #fff;
}

.section-title {
    padding: 0 rem(7);
    margin: rem(20) 0 rem(13);
    border-left: 4px solid #01ab5d;
    font-size: rem(14);
    color: #000;
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: rem(8);
}

.category-btn {
    font-weight: 400;
    padding: rem(5) rem(15);
    font-size: rem(12);
    border: none;
    color: #666;
    border-radius: rem(4);
    background: #f3f6f7;
    cursor: pointer;

    &:hover {
        background-color: #0abc54;
        color: #fff;
    }
}
</style>